<template>
  <div>
    <mf @query="changeGroup()" :datas="datas">
      <template slot="lastBtn" id="ab">
        <el-select v-model="groupId" placeholder="请选择" @change="changeGroup()">
          <el-option
            v-for="item in options"
            :key="item.groupId"
            :label="item.groupName"
            :value="item.groupId"
          ></el-option>
        </el-select>

        <el-button size="mini" type="primary" @click="edit()" style="margin-left:20px">记账</el-button>
      </template>
      <template slot="oper" slot-scope="scope">
        <el-button size="mini" type="text" @click="edit(scope.value)">编辑</el-button>
        <el-button size="mini" type="text" @click="remove(scope.value)">删除</el-button>
      </template>
    </mf>

    <el-dialog
        title="记账"
        :visible.sync="dialogVisible"
        width="40%">
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="金额">
                <el-input v-model="formLabelAlign.money"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="formLabelAlign.remarks"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="commit()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import requests from "@/https.js";
export default {
  data() {
    return {
        current_group:"",
        //弹框
         dialogVisible: false,

      visible2: false,
      //组选择下拉框
      options: [

      ],
      groupId: "",
      value: "",
      key:'',

      //记账
      labelPosition: "right",
      formLabelAlign: {
        money: '',
        remarks: "",
      },

      //显示组数据
      datas: {
        params: {
          page: 1,
          size: 20
        },
        table: {
          selection: true,
          loading: false
        },
        resData: {
          rows: [],
          size: 20,
          page: 1,
          recordsTotal: 0
        },
        filterList: [
             {
              type: "input",
              prop: "remarks",
              conditionshow: false,
              filedShow: true,
              isSearchHide: true,
              label: "备注",
              placeholder: "备注"
            },
          {
            type: "input",
            prop: "money",
            conditionshow: false,
            filedShow: true,
            label: "金额",
            placeholder: "是否为默认组"
          },
          {
            type: "input",
            prop: "name",
            conditionshow: true,
            filedShow: true,
            label: "记账人",
            placeholder: "记账人"
          },
          // {
          //   type: "select",
          //   prop: "name",
          //   conditionshow: true,
          //   filedShow: true,
          //   label: "所属组",
          //   placeholder: "所属组"
          // },
          {
            type: "input",
            prop: "date",
            conditionshow: true,
            filedShow: true,
            label: "时间",
            placeholder: "时间"
          },
      
          {
            type: "input",
            prop: "oper",
            conditionshow: false,
            filedShow: true,
            isSearchHide: true,
            label: "操作",
            placeholder: "操作",
            slot: true
          }
        ]
      }
    };
  },
  mounted() {
    this.getGroup();
    // this.strat();
  },
  methods: {
    rowClick(row) {
      // console.log(row,'row');
      this.$emit("rowClick", row);
    },
    edit(row){
      this.dialogVisible = true
      if(row){
//           aid: 19
// date: "2019-04-27 20:01"
// money: "15"
// name: "建鸿"
// remarks: "15"
        this.formLabelAlign={aid:row.aid,money: row.money,remarks:row.remarks}    
      }else{
        console.log()
        this.formLabelAlign={GroupId:this.groupId,money:'',remarks: ""}
        this.key = 'add'        
      }

    },
    commit() {
          // this.formLabelAlign.value = parseFloat(this.formLabelAlign.value)  
          if(this.key=='add'){
            console.log(this.formLabelAlign)
            requests.post("/api/charge", { key: "add", data: this.formLabelAlign}).then(res => {
              this.dialogVisible = false;
              this.datas.resData.rows.push(res.data.data[0])
              this.changeGroup()

              });
          }else{
            requests.post("/api/charge", { key: "update", data: this.formLabelAlign}).then(res => {
              this.dialogVisible = false;
              this.datas.resData.rows.push(res.data.data[0])
              this.changeGroup()

              });
            
          }
          
    },
    remove(row){
      requests.post('/api/charge',{key:'remove',data:{aid:row.aid}}).then(res=>{
          if(res.data.code==0){
            this.$notify.success('删除成功')
            this.changeGroup()
          }
      })
        
    },
    //获取全部流水
    // strat() {
    //   // this.filterList = [];
    //   requests.get("/api/charge",this.datas.params).then(res => {
    //     this.datas.resData.rows = res.data.data;
    //     console.log("default", res.data.data);
    //   });
    // },
    //获取组名
    getGroup() {
      requests.get("/api/charge/group").then(res => {
        this.options = res.data.data;
        this.groupId = res.data.data[0].groupId;
        // this.changeGroup(res.data.data[0].groupId)
        this.changeGroup()
      });
    },
    //根据组id获取流水
    changeGroup() {
      requests.post("/api/charge", { key: "getgroup", data: { 'GroupId':this.groupId,page:this.datas.params.page,size:this.datas.params.size} }).then(res => {
          if(res.data.code == 0){
            this.datas.resData.rows = res.data.data.accountBooks;
            this.datas.resData.recordsTotal = res.data.data.pageInfo.count
          }

        });
    },
    //输入流水框
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

  }
};
</script>

<style lang="scss">

</style>

